<template>
  <div class="list">
    <loader v-if="!playlists"></loader>
    <div
      v-else
      v-for="item in playlists"
      :key="item.index"
      class="list-item"
      @click="toPlaylist(item.id)"
    >
      <div class="img">
        <img :src="item.coverImgUrl" :alt="item.name" :title="item.name" />
        <div class="listen">
          <img src="@/assets/img/listen.png" alt="listen" />
          {{item.playCount | count}}
          <img src="@/assets/img/play.png" alt="play" />
        </div>
      </div>
      <p :title="item.name">{{item.name}}</p>
      <p :title="item.creator.nickname">by {{item.creator.nickname}}</p>
    </div>
    <li class="list-item"></li>
    <li class="list-item"></li>
    <li class="list-item"></li>
    <li class="list-item"></li>
  </div>
</template>

<script>
import Loader from '@/components/common/loader/Loader'

export default {
  components: {
    Loader
  },
  props: {
    playlists: {
      type: Array,
      default() {
        return {}
      }
    }
  },
  filters: {
    count(num) {
      return num / 10000 > 10 ? parseInt(num / 10000) + '万' : num
    }
  },
  methods: {
    toPlaylist(id) {
      this.$router.push('/discover/playlist/detail?id=' + id)
    }
  }
}
</script>

<style scoped>
.list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* 每一项 */
.list-item {
  cursor: pointer;
  margin: 30px 5px 0;
}

/* 图片 */
.img {
  position: relative;
  width: 140px;
  height: 140px;
}
.img img {
  width: 140px;
  height: 140px;
}

/* 图片下的信息 */
.listen {
  position: absolute;
  display: flex;
  align-items: center;
  bottom: 0;
  color: #fff;
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  background-color: rgba(0, 0, 0, 0.6);
}
.listen img {
  margin: 0 3px 0 5px;
  width: 20px;
  height: 20px;
}
.listen img:nth-child(2) {
  position: absolute;
  right: 5px;
}

/* 下方的标题和名字 */
.list-item p {
  color: #fff;
  width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  margin-top: 8px;
}
.list-item p:nth-child(3) {
  font-size: 13px;
  color: #aaa;
}

li.list-item {
  height: 0;
  width: 140px;
}
</style>